<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" :content="`${this.$route.query.name} - 预设权限`">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item>
          <div :style="{ borderBottom: '1px solid #E9E9E9' }">
            <a-checkbox :indeterminate="indeterminateCard" :checked="checkAllCard" @change="(e) => { onCheckAllChange(e, 'card') }">
              店面权限
            </a-checkbox>
          </div>
          <a-checkbox-group v-model="checkedCardList" :options="plainOptions" @change="(e) => { onChange(e, 'card') }" />
        </a-form-item>
        <a-divider />
        <a-form-item :wrapperCol="{ span: 16 }" style="text-align: left">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>
  
<script>
export default {
  name: 'OfficeCompetence',
  data() {
    return {
      form: this.$form.createForm(this),
      loading: false,
      queryParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: 1,
      },
      options: [],
      plainOptions: [{label:'店面列表',value:1,},{label:'编辑店面',value:2,}],
      checkedMoenyList: [],
      checkList: [],
      checkedCardList: [],
      checkedTurnList: [],
      checkedDiffList: [],
      indeterminateMoney: [],
      indeterminateCard: false,
      indeterminateTurn: false,
      indeterminateDiff: false,
      checkAllMoney: [],
      checkAllCard: false,
      checkAllTurn: false,
      checkAllDiff: false,
    }
  },
  mounted() {
  },
  //请参考   /system/paytype/shoppayset   收款门店设置处理
  methods: {
    onChange(checkedList, key) {
      if (key === 'card') {
        this.indeterminateCard = !!checkedList.length && checkedList.length < this.plainOptions.length
        this.checkAllCard = checkedList.length === this.plainOptions.length
      }
    },
    onCheckAllChange(e, key) {
      if (key == 'card') {
        Object.assign(this, {
          checkedCardList: e.target.checked ? this.plainOptions?.map((item) => item.value) : [],
          indeterminateCard: false,
          checkAllCard: e.target.checked,
        })
      }
    },
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
            this.$message.warning('接口开发中')
            this.loading = false
        }
      })
    },
  },
}
</script>
  